<template>
	<view class="wrap">
		<view class="card">
			<text class="h">智能匹配</text>
			<input class="inp" placeholder="输入关键词，如：海鲜、零食、健康" v-model="keyword" />
			<button class="btn" @click="search">匹配推荐</button>
		</view>
		<view class="result">
			<view class="item" v-for="p in products" :key="p.id" @click="goDetail(p.id)">
				<text>{{p.title}} ¥{{p.price}}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
export default { data(){return{keyword:'', products:[]}}, methods:{ async search(){
	const res = await api.getProducts({ keyword:this.keyword, pageNum:1, pageSize:20 });
	if(res.code===0) this.products = res.data.records||[];
}, goDetail(id){ uni.navigateTo({url:`/pages/product/detail?id=${id}`}) } } }
</script>

<style>
.wrap{ padding: 24rpx; }
.card{ background:#fff; padding: 24rpx; border-radius: 12rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,.04); }
.h{ font-weight:700; font-size: 32rpx; }
.inp{ background:#f7f7f7; border-radius: 8rpx; padding: 16rpx; margin: 16rpx 0; }
.btn{ background:#3cc51f; color:#fff; }
.result{ margin-top: 20rpx; }
.item{ padding: 16rpx; background:#fff; border-radius: 8rpx; margin-bottom: 12rpx; }
</style>

